<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon " type="images/x-icon" href="{{ url_for('static', filename='assets/favicon2.ico') }}">

    <link rel="stylesheet" href="{{ url_for('static', filename='bs3/css/dark/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='fa/font-awesome.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='resources/toastr.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='resources/webview.css') }}">

    <title>{{ title }}</title>
    {% block css%}
    <style type="text/css">
        .container {
            margin-right: 10px;
            margin-left: 10px;
        }

    </style>
    {% endblock %}
</head>

<body>
   
    <nav class="navbar navbar-default  navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <img width="10%" alt="Brand" src="{{url_for('static',filename='assets/logo.png')}}"> 
                <!-- <span class="product"></span> -->
            </a>
            </div>
        
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <!-- <li class="dashboard"><a href="/dashboard">Dashboard</a></li> -->

<!--                 <li role="presentation" class="dropdown {{ for_customer }}">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                    Host <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="pin"><a href="/pin">Pin</a></li>
                        <li class="analog"><a href="/analog">Analog</a></li>
                    </ul>
                </li>
 -->
                <!-- <li class="led"><a href="/led">Led</a></li> -->
                <!-- <li class="mod"><a href="/mod">Module</a></li> -->


<!--         

                <li role="presentation" class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                    Module <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="mod_host"><a href="/mod_host">MSA</a></li>
                        <li class="mod_pin {{ for_customer }}"><a href="/mod_pin">Pin</a></li>
                        <li class="mod_adc {{ for_customer }}"><a href="/mod_adc">ADC</a></li>
                        <li class="mod_dac {{ for_customer }}"><a href="/mod_dac">DAC</a></li>
                        <li class="mod_ddm"><a href="/mod_ddm">DDM</a></li>
                        <li class="mod_dsp {{ for_customer }}"><a href="/mod_dsp">DSP</a></li>
                        <li class="mod_cosa {{ for_customer }}"><a href="/mod_cosa">COSA</a></li>
                        <li class="mod_itla {{ for_customer }}"><a href="/mod_itla">ITLA</a></li>
                        <li class="mod_abc {{ for_customer }}"><a href="/mod_abc">ABC</a></li>

                        <li class="prbs2 {{ for_customer }}"><a href="/prbs2">PRBS <sup>new<sup></a></li>
                        
                        <li class="page_template"><a href="/page_template?page_name=Lower Page">Pages View</a></li>
                        <li class="mod_constellation {{ for_customer }}"><a href="/mod_constellation">Constellation</a></li>

                        <li class="cmis_dump {{ for_customer }}"><a href="/cmis_dump">CMIS Dump</a></li>
                    </ul>
                </li>



                <li class="af"><a href="/af?page_name=Lower Page">Alarms/Faults</a></li>

                <li class="download"><a href="/download">Download</a></li>
                <li class="console1 {{ for_customer }}"><a href="/console1">Console</a></li> -->

                <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">System <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <!-- <li class="settings"><a href="/settings">Settings</a></li> -->
                    <li class="dashboard"><a href="/dashboard">Dashboard</a></li>

<!--                     <li role="separator" class="divider"></li>
                    <li class="ping"><a href="/ping">Ping</a></li>
                    <li role="separator" class="divider {{ for_customer }}"></li>

                    <li class="export {{ for_customer }}"><a href="/export">Export &nbsp;&nbsp;<i class="glyphicon glyphicon-download-alt"></i></a></li>
                    <li role="separator" class="divider {{ for_customer }}"></li>


                    <li class="auto_fan {{ for_customer }}"><a href="/auto_fan">Auto Fan</a></li>
                    <li role="separator" class="divider {{ for_customer }}"></li>

                    <li class="mod_dsp_new {{ for_customer }}"><a href="/mod_dsp_new">DSP API (canopus)</a></li>
                    <li class="mod_dsp_suggest {{ for_customer }}"><a href="/mod_dsp_suggest">DSP API Suggest (canopus)</a></li>

                    <li role="separator" class="divider {{ for_customer }}"></li>

                    <li class="mod_dsp_deneb {{ for_customer }}"><a href="/mod_dsp_deneb">DSP API (deneb)</a></li> -->

                    <li role="separator {{ for_customer }}" class="divider"></li>

                    <li class="i2c_port_rw {{ for_customer }}"><a href="/i2c_port_rw">I2C Port Read/Write</a></li>

                    <li class="module_reset"><a href="/module_reset">Module Reset</a></li>
                    <li class="module_lpmode"><a href="/module_lpmode">Module LPMode</a></li>

                    <li class=""><a href="#">Port Link Status</a></li>
                    <li class=""><a href="#">Generate Traffic From the Port</a></li>
                    <li class=""><a href="#">Traffic Counter Checker</a></li>
                    <li class="port_err_alm_checker"><a href="/port_err_alm_checker">Port Error/Alarm Checker</a></li>


                    <li class=""><a href="#">Switch Fan Speed</a></li>
                    <li class=""><a href="#">Switch Temperature Reading</a></li>

                    <li role="separator {{ for_customer }}" class="divider"></li>
                    <li class="console1 {{ for_customer }}"><a href="/console1">Console</a></li> 

                    <li role="separator {{ for_customer }}" class="divider"></li>
                    <li><a href="#" data-toggle="modal" data-target="#myAbout">About ...</a></li>
                </ul>
                </li>
            </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <br><br><br><br>

    <div class="modal fade" id="myAbout" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">About</h4>
            </div>
            <div class="modal-body">
                <center>
                  <img width="55%" class="{{ for_customer }}" alt="Brand" src="{{url_for('static',filename='assets/logo.png')}}"> 
                  <!-- <h3>Webview</h3> -->
                  <br>
                  <h4 style="color: #aaa"><b><span class="product"></span></b></h4>
                  <br> <br>
                 
                  <button class="btn btn-lg btn-danger" id="btn_restart_gui">
                  Restart GUI
                  &nbsp;&nbsp;
                  <i class="fa fa-refresh"></i>
                  </button>
                  <br><br>
                  </center>
            </div>
          </div>
        </div>
      </div>
          
     
    <div class="container-fluid">

    {% block body%} {% endblock %}

    </div>

    <!-- <nav class="navbar navbar-default navbar-fixed-bottom">
    <span style="align-content: center">
    Neophotonics &copy; 2019
    </span>
    </nav> -->
          
</body>
<script src="{{ url_for('static', filename='bs3/js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='bs3/js/bootstrap.min.js') }}"></script>
<!--
    <script src="{{ url_for('static', filename='echarts/echarts.simple.min.js') }}"></script>
-->
<script src="{{ url_for('static', filename='echarts/echarts.min.js') }}"></script>
<script src="{{ url_for('static', filename='resources/holder.min.js') }}"></script>
<script src="{{ url_for('static', filename='resources/toastr.min.js') }}"></script>
<script src="{{ url_for('static', filename='layer/layer.js') }}"></script>

{% block js%} 
<script type="text/javascript">

    function nocontextmenu()
    {
        event.cancelBubble = true
        event.returnValue = false;
        return false;
    }

    function norightclick(e){
        if (window.Event)
        {
            if (e.which == 2 || e.which == 3)
            return false;
        }
        else if (event.button == 2 || event.button == 3)
        {
            event.cancelBubble = true
            event.returnValue = false;
            return false;
        }
    }

    function get_product() {
        url = "/api/get_product";
        $.get(url, function(data, status) {
            console.log(data);
            $('.product').html(data.split(",")[0]);

            host_board_ip = data.split(",")[1];
            gui_title = $(document).attr("title");
            $(document).attr("title", gui_title + " [ " + host_board_ip + " ]");
        });
    }

    $("#btn_restart_gui").click(function() {
        ret = confirm("Restart GUI. Sure?");
        if (ret == false) return false;
        $.post(
            "api/btn_reconnect", {
            },
            function(data, status) {
                console.log("data: " + data);
            }
        );
    });

    $(document).ready(function(){
        get_product();

        // document.oncontextmenu = nocontextmenu;   // for IE5+
        // document.onmousedown = norightclick;   // for all others
        
        var aid = (window.location.pathname.split("/")[1]).split(".")[0];
        // alert(aid);
        if(aid=="")
            $(".settings").attr('class', 'active');
         else
            $("."+aid).attr('class', 'active');
    });
</script>
{% endblock %}
</html>